<template>
<div class="single-stock ui form ">
    <div class="ui grid form segment">
        <div class=" row" :class="{disabled:disable}">
            <template v-for='item in dateShowContent' v-if='!item.disabled'>
						<div  v-if='item.child'>
							<span class="parent-label">{{item.label}}</span>
							<div class="fields inline" >
								<div class="ui field input" >
								  <label v-for='child in item.child'>{{child.label}}：<input type="number" :placeholder="`请输入${child.label}`" v-model='stock[item.name][child.name]'></label>
								</div>
							</div>
						</div>
					<div class="five wide column"  v-else>
							<div class="ui field input">
								<label>{{item.label}}：<input type="number" :placeholder="`请输入${item.label}`" v-model='stock[item.name]'></label>
							</div>
						</div>
					</template>
        </div>
        <template v-if='showValid'>
				<div class="ui input">
					<label>
						<input type="checkbox"  class="hidden" v-model="use_valid_date">
						使用生效时间
					</label>
				</div>
				<div class=" row" :class="{disabled:!use_valid_date}">
					<div class="five wide column">
							<div class="ui field inline">
								<label>生效时间：</label><br><myDatepicker :date='valid_date' :limit='limit'></myDatepicker>
							</div>
					</div>
					<div class="five wide column"  v-for='item in validContent'>
							<div class="ui field input">
								<label>{{item.label}}：<input type="number" :placeholder="`请输入${item.label}`" v-model='stock[item.name]'></label>
							</div>
					</div>
				</div>
			</template>
    </div>
</div>
</div>
</template>

<script>
import myDatepicker from 'components/common/vue-datepicker'

export default {
    components: {
        myDatepicker
    },
    props: {
        disable: {
            default: true
        },
        showValid: {
            default: false
        },
        productData: {},
        dateShowContent: {
            type: Array,
            default () {
                return []
            }
        },

    },
    data() {
        return {
            attrTab: ['First', 'Second'],
            attrTabActive: "First",
            stock: {},
            valid_date: {
                time: ''
            },
            use_valid_date: false,
            limit: [{
                    type: 'weekday',
                    available: [1, 2, 3, 4, 5, 6, 0]
                },
                {
                    type: 'fromto',
                    from: new Date(),
                    to: new Date(new Date().getTime() + 60 * 60 * 24 * 180 * 1000)
                }
            ],
        }
    },
    computed: {
        validContent() {
            let data = [];
            if (this.showValid) {
                data = [{
                    name: "delayed_sale_price",
                    label: "售价(￥)"
                }, {
                    name: "delayed_fc_serv",
                    label: "服务者分成"
                }, {
                    name: "delayed_fc_serv_up",
                    label: "服务商分成"
                }, {
                    name: "delayed_fc_sp",
                    label: "供应商分成"
                }]
            }
            return data
        }
    },
    watch: {
		"valid_date.time":function(val){
			this.stock.valid_date = val
		},
        stock: {
            handler() {
				let data = {};
				if(this.use_valid_date){
					data = this.stock
					if(data){
						data.use_valid_date = true;
					}
				}else{
					this.dateShowContent.forEach(item =>{
						data[item.name] = this.stock[item.name]
					})
				}
				this.$emit('upStockData', data)
            },
            deep: true
        }
    },
    methods: {
        initStock() {
            if (this.dateShowContent) {
                this.dateShowContent.forEach(item => {
                    if (!item.disabled) {
                        if (item.child) {
                            this.$set(this.stock, item.name, {})
                            item.child.forEach(child => {
                                this.$set(this.stock[item.name], child.name, 0)
                            })
                        } else {
                            this.$set(this.stock, item.name, 0)
                        }
                    }
                })
            }
            if (this.validContent.length > 0) {
                this.validContent.forEach(item => {
                    if (!item.disabled) {
                        if (item.child) {
                            this.$set(this.stock, item.name, {})
                            item.child.forEach(child => {
                                this.$set(this.stock[item.name], child.name, 0)
                            })
                        } else {
                            this.$set(this.stock, item.name, 0)
                        }
                    }
                })
            }
        }
    },
    created() {
        setTimeout(() => {
            this.initStock();
            if (this.productData) {
                this.stock = { ...this.stock,
                    ...this.productData
                }
            }
			this.valid_date.time = this.stock.valid_date
			if(this.productData.valid_date){
					this.valid_date.time = this.stock.valid_date
			}
            if (this.showValid && this.productData.valid_date !== '') {
                this.use_valid_date = true
            }
        }, 600)

    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.single-stock {
    position: relative;
    z-index: 0;
    .disabled {
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9;
            background: rgba(78, 78, 78, 0.1);
        }
    }
    margin-top: 15px;
    .field.input {
        label {
            margin-right: 5px;
        }
    }
    .parent-label {
        margin-top: 10px;
        display: block;
        font-weight: 500;
    }
    .sale-allow {
        margin-top: 15px;
        font-size: 16px;
    }
}
</style>
